<template>
  <div style="height: 100%;background-color:white ;">
    <el-row>
      <el-col>
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="exerciseBook.name" placeholder="请输入题库名称" @keyup.enter.native="advanceConfirm">
              <i class="el-input__icon el-icon-search" slot="prefix"></i>
              <el-button :icon="appendIcon" slot="append" @click="switchAppend"></el-button>
            </el-input>
          </div>
          <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">ISBN</div>
              <div style="display: inline-block">
                <el-input v-model="exerciseBook.isbn" size="small" style="width: 300px;"></el-input>
              </div>
            </div>
            <div class="block"style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">版本</div>
              <div style="display: inline-block">
                <el-input-number v-model="exerciseBook.version" :min="0"></el-input-number>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">导入日期</div>
              <div style="display: inline-block">
                <el-date-picker v-model="exerciseBook.importDateRange" :picker-options="pickerOptions" align="right"
                                end-placeholder="截止日期"
                                range-separator="至" value-format="yyyy-MM-dd"
                                size="small" start-placeholder="开始日期" style="width: 300px;"
                                type="daterange" unlink-panels>
                </el-date-picker>
              </div>
            </div>

            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">导入者</div>
              <div style="display: inline-block">
                <el-select clearable filterable size="small"
                           placeholder="请选择"
                           v-model="exerciseBook.createdBy"
                           style="width: 300px;">
                  <el-option
                    v-for="item in $store.state.userList"
                    :key="item.userName"
                    :label="item.name"
                    :value="item.userName">
                  </el-option>
                </el-select>
              </div>
            </div>

            <div style="margin: 10px;">
              <el-row>
                <el-col :offset="6" :span="6">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" @click="showAdvance = false">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div style="margin-left: 30px;height: 32px; width: 88px;">
                    <el-button size="small" @click="reset">重置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 30px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" @click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-row>
      <el-table :data="officialTableData" border style="width: 100%;" stripe :height="tableHeight"
                @selection-change="handleSelectionChange">
        <el-table-column
          v-model="multipleSelection" align="center"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="题库名称" min-width="200" prop="name"></el-table-column>
        <el-table-column label="ISBN" width="160" prop="isbn"></el-table-column>
        <el-table-column label="版本" width="50" prop="version"></el-table-column>
        <el-table-column label="导入者" width="100" prop="createdBy">
          <template slot-scope="scope">
              <span v-if="scope.row.createdBy!=null"
                    v-html="$store.state.userList.find(user => user.userName === scope.row.createdBy).name"></span>
          </template>
        </el-table-column>
        <el-table-column label="导入日期" width="180"
                         prop="importDate"></el-table-column>
        <el-table-column label="操作" min-width="160">
          <template slot-scope="scope">
            <span>
              <el-link type="primary" @click.prevent="editMetadata(scope.row)">元数据</el-link></span>
            <span>
              <el-link type="primary" @click.prevent="exerciseGroupTable(scope.row)">试题列表</el-link></span>
            <span>
              <el-link type="danger" @click.prevent="deleteById(scope.row.id)">删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div>
        <el-pagination
          :total="totalNum"
          :page-size.sync="exerciseBook.pageSize"
          :current-page.sync="exerciseBook.currentPage"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          @current-change="selectPage"
          @size-change="selectPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: "Official",
    data() {
      return {
        tableHeight: 0,
        officialTableData: [],
        totalNum: 0,
        multipleSelection: [],
        failureReason: '',
        showAdvance: false,
        appendIcon: "el-icon-caret-bottom",
        exerciseBook: {
          version: 1,
          status: 1,
          currentPage: 1, // 第几页
          pageSize: 10, // 每页显示的数据个数
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    methods: {
      exerciseGroupTable: function (book) {
        this.$store.commit('setBook', book)
        this.$router.push('/exerciseBook/exerciseGroupTable')
      },
      //复选框选中事件
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteById(id) {
        this.$confirm('是否删除?', '删除题库', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post('/pmph/action/exerciseBook/deleteById', {
            id: id
          }).then(this.selectPage)
        });
      },
      editMetadata(exerciseBook) {
        this.$store.commit('showBookMetadataDrawer', exerciseBook)
      },
      selectPage() {
        this.axios.get('/pmph/action/exerciseBook/selectPage', {
          params: this.exerciseBook
        }).then((response) => {
          this.officialTableData = response.data.records;
          this.totalNum = response.data.total;
        })
      },
      switchAppend: function () {
        if (this.showAdvance) {
          this.showAdvance = false;
          this.appendIcon = "el-icon-caret-bottom";
        } else {
          this.showAdvance = true;
          this.appendIcon = "el-icon-caret-top";
        }
      },
      reset() {
        this.exerciseBook = {
          version: 1,
          status: 1,
          currentPage: 1, // 第几页
          pageSize: 10, // 每页显示的数据个数
        }
      },
      advanceConfirm: function () {
        this.exerciseBook.currentPage = 1;
        this.showAdvance = false;
        this.selectPage();
      }
    },
    created() {
      this.tableHeight = CONST.WORKSPACE_HEIGHT - 140;
      this.selectPage();
    },
  }

</script>

<style scoped>

</style>
